<template>
  <div>
    <!-- 头部 -->
    <Header />
    <!-- /头部 -->

    <!-- this.$router.push({
        path:'/list',
        query:{id,name,title}
    })-->
    <!-- 接收传递参数 -->
    <!-- list 
    this.$route.query;-->
    <!-- 体部 -->
    <div class="content">
      <div class="wrapper">
        <!-- {{category}} -->
        <div class="title">{{category.name}}</div>
        <div class="inner_content">
          <!-- {{categoryList}} -->
          <!-- 左侧表格 -->
          <div class="articleList">
            <!-- 文章列表 -->
              <ul v-if='categoryList.total>0'>
                <li class='list_list' v-for='item in categoryList.list' :key="item.id" >
                  <div class='artitle' @click='todetails(item.id)'>{{item.title}}</div>
                  <div class='list'>
                    <!-- 发表时间 -->
                    <span>{{item.publishTime | fmtDate}}</span>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <!--阅读次数 -->
                    <span>{{item.readTimes}}</span>

                  </div>
                </li>
              </ul>

              <div v-else class='nodata'>暂无数据</div>
            <!-- /文章列表 -->
            <!-- 分页 -->
            
             <div class='page'>
                <el-pagination
              background
              layout="prev, pager, next"
              @current-change="handleCurrentChange"
              :page-size="categoryList.pageSize" 
              hide-on-single-page
              :total="categoryList.total">  
            </el-pagination>
             </div>
            
            <!-- /分页 -->


          </div>
          <!-- 右侧表格 -->
          <div class="rank"></div>
        </div>
      </div>
    </div>
    <!-- /体部 -->
    <!-- 底部 -->
    <Footer />
    <!-- /底部 -->
  </div>
</template>
<script>
import {get} from '../utils/request'
import Header from "../components/Header";
import Footer from "../components/Footer";
export default {
  // 注册局部组件
  components: {
    Header,
    Footer
  },
  created() {
    this.category = this.$route.query;
    this.loadArticle();
  },
  // 监听器 监听$route.query
  watch:{
    '$route.query':{
      // 当属性发生变化触发handler函数
      handler(query){
        this.category=query;
        // 只有栏目不同展示数据不同
        this.loadArticle()
      },
      deep:true
    }
  },
  methods:{
    // 跳转到详情页
    todetails(id){
      this.$router.push({
        path:"/article",
        query:{id}
      })
    },
    // 给分页按钮绑定事件
    handleCurrentChange(page){
      // 代表当前点击的按钮
      // alert(page);  //2
      this.params.page=page; //2
      this.loadArticle();
    },
    // 加载文章方法
    loadArticle(){
       let url='/index/article/pageQuery';
       this.params.categoryId=this.category.id;
          // {
          //   page:1
          //   pageSize:5
          // }
        get(url,this.params).then(res=>{
          this.categoryList=res.data;  //{ list:[]}
        })
    }
  },
  data() {
    return {
      category: {},
      params:{
        page:1,
        pageSize:5
      },
      categoryList:{list:[]} 
    };
  }
};
</script>
<style lang="scss">

.content {
  padding: 2em .5em;
  background-color: #ecf6f2;
  & > .wrapper {
    .inner_content {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      & > div {
        background-color: #fff;
        height: 500px;
        border-radius: 5px;
        padding: 1em 0.5em;
      }
      .articleList {
        .artitle{
          cursor: pointer;
        }
        .nodata{
          color: red;
          text-align: center;
          padding:1em .5em;
        }
        .page{
          padding: 1em .5em;
          text-align: center;
        }
        
        ul>li.list_list{
          &>div{
            line-height: 2em;
            // padding: 1em .5em;
          }
          border-bottom: 1px solid #ededed;
        }
        flex: 1;
        margin-right: 2em;
      }
      .rank {
        flex-basis: 200px;
      }
    }

    .title {
      font-size: 20px;
      font-weight: bold;
      color: #028b39;
      padding: 1em 0.5em;
    }
  }
}
</style>
